import {useEffect, useState,} from 'react';
import { Link, useDispatch, useSelector, ArticleModelState } from 'umi';
import {
  Form,
  Input,
  Select,
  Button,
  Table,
  Tag,
  Space,
  ConfigProvider,
  message,
} from 'antd';
import { PlusOutlined, ReloadOutlined } from '@ant-design/icons';
import styles from './index.less';
import classNames from 'classnames';
import 'antd/dist/antd.css';
import zhCN from 'antd/es/locale/zh_CN';
const { Option } = Select;
 
// 分类数据
const selectClassification = [
  '前端',
  '后端',
  '阅读',
  'Linux',
  'LeetCode',
  '要闻',
  'java',
  '测试',
];
 
export default function article(this: any) {
  const { articleList } = useSelector(
    (state: { article: ArticleModelState }) => state.article,
  );

  const dispatch = useDispatch();
  const [page, setPage] = useState(1);
  useEffect(() => {
    dispatch({
      type: 'article/getArticleList',
      payload: page,
    });
  }, []);

  const [selectionType] = useState<'checkbox' | 'radio'>(
    'checkbox',
  );
 
  const columns = [
    {
      title: '标题',
      dataIndex: 'title',
      id: 'title',
      width: 170,
    },
    {
      title: '状态',
      dataIndex: 'isRecommended',
      id: 'isRecommended',
      width: 100,

      render: (isRecommended: boolean) => {
        console.log(isRecommended);

        // 渲染是否通过
        return (
          <span>
            {isRecommended ? (
              <span className={styles.green_one}></span>
            ) : (
              <span className={styles.red_one}></span>
            )}
            <span style={{ marginLeft: '8px' }}>
              {isRecommended ? '已发布' : '草稿'}
            </span>
          </span>
        );
      },
    },
    {
      title: '分类',
      // status
      dataIndex: `category`,
      id: 'id',
      width: 100,
    },
    {
      title: '标签',
      key: 'tags',
      dataIndex: 'tags',
      width: 110,
      render: (tags: any[]) => (
        <span>
          {tags.map((tag) => {
            let color = tag.length > 5 ? 'geekblue' : 'green';
            if (tag === 'loser') {
              color = 'volcano';
            }
            return (
              <Tag color={color} key={tag}>
                {tag.label}
              </Tag>
            );
          })}
        </span>
      ),
    },
    {
      title: '阅读量',
      dataIndex: 'views',
      id: 'views',
      width: 120,
      render: (views: string) => (
        <span className={styles.badge}>
          <span className={styles.views}>{views}</span>
        </span>
      ),
    },
    {
      title: '喜欢数',
      dataIndex: 'likes',
      id: 'likes',
      width: 120,
      render: (likes: string) => (
        <span className={styles.badge}>
          <span className={styles.likes}>{likes}</span>
        </span>
      ),
    },
    {
      title: '发布时间',
      dataIndex: 'publishAt',
      id: 'publishAt',
      width: 120,
    },
    {
      title: '操作',
      id: 'action',
      width: 325,
      render: (record: any) => (
        <Space size="middle">
          <a>编辑 </a>
          <a
            onClick={() => {
              const user = JSON.parse(localStorage.getItem('user') as string);
              if (user.role === 'admin') {
                dispatch({
                  type: 'article/getisRecommended',
                  payload: {
                    id: record.id,
                    isRecommended: !record.isRecommended,
                  },
                });
                dispatch({
                  type: 'article/getArticleList',
                });
                message.success('操作成功');
              } else {
                message.error('用户权限不足');
              }
            }}
          >
            {record.isRecommended ? '首焦推荐' : '撤销首焦'}
          </a>
          <a>查看访问</a>
          <a
            onClick={() => {
              const user = JSON.parse(localStorage.getItem('user') as string);
              if (user.role === 'admin') {
                dispatch({
                  type: 'article/getArticleDel',
                  payload: record.id,
                });
                dispatch({
                  type: 'article/getArticleList',
                });
                message.success('操作成功');
              } else {
                message.error('用户权限不足');
              }
            }}
          >
            删除
          </a>
        </Space>
      ),
    },
  ];
  // 设置多选框
  const [selectedRowKeys, changeSelectedRowKeys] = useState([])

  // 设置多选框联动效果按钮展示
  const [show, setShow] = useState(false)
  // 改变多选框
  function onSelectChange(selectedRowKeys: any) {
    changeSelectedRowKeys(selectedRowKeys);

    if (selectedRowKeys.length) {
      setShow(true);

    } else {
      setShow(false)
    }
  };
  // 将单选框赋值
  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
    selections: false
  };
 
  const [form] = Form.useForm();

  // 重置
  const onReset = () => {
    form.resetFields();
  };
  // 搜索
  const onSearch = () => { };

  return (
    <main className={styles.layout_Content}>
      <header>
        <div className={styles.breadcrumb}>
          <span>
            <span>
              <Link to={'/'}>工作台</Link>
            </span>
            <span className={styles.breadcrumb_Separator}>/</span>
          </span>
          <span>
            <span>
              <Link to={'/article'}>所有文章</Link>
            </span>
            <span className={styles.breadcrumb_Separator}>/</span>
          </span>
        </div>
        <div style={{ margin: '12px 0 0', color: 'red' }}></div>
      </header>

      <main className={styles.contents}>
        <div>
          <Form
         
            layout="inline"
            className={styles.form_controls}
            form={form}
        
          >
            <div className={classNames(styles.ant_row, styles.top)}>
              <Form.Item label="标题" name="Thetitle" labelCol={{ offset: 5 }}>
                <Input
                  style={{ width: '254px', padding: ' 4px 11px' }}
                  placeholder="请输入文章标题"
                />
              </Form.Item>
              <Form.Item
                name="state"
                label="状态"
                rules={[]}
                labelCol={{ offset: 13 }}
              >
                <Select
                  placeholder=""
                  allowClear
                  size="middle"
                  style={{ width: '180px', padding: ' 0px 0px' }}
                >
                  <Option value="male">已发布</Option>
                  <Option value="female">草稿</Option>
                </Select>
              </Form.Item>
              <Form.Item
                name="classify"
                label="分类"
                rules={[]}
                labelCol={{ offset: 21 }}
              >
                <Select
                  placeholder=""
                  allowClear
                  size="middle"
                  style={{ width: '180px', padding: ' 0px 0px' }}
                >
                  {selectClassification.map((province) => (
                    <Option key={province}>{province}</Option>
                  ))}
                </Select>
              </Form.Item>
            </div>
            <div className={classNames(styles.ant_row, styles.top)}>
              <div className={styles.ant_btn}>
                <Button type="primary" onClick={onSearch}>
                  搜索
                </Button>
                <Button style={{ margin: '0 8px' }} onClick={onReset}>
                  重置
                </Button>
              </div>
            </div>
          </Form>
          <div
            style={{ background: ' rgb(255, 255, 255)', padding: '24px 12px' }}
          >
            <div className={styles.btn}>
              <div>
                {show ? (
                  <div>
                    <Button style={{ margin: '0 8px' }}>发布</Button>
                    <Button style={{ margin: '0 8px' }}>草稿</Button>
                    <Button style={{ margin: '0 8px' }}>首焦推荐</Button>
                    <Button style={{ margin: '0 8px' }}>撤销首焦</Button>
                    <Button danger style={{ margin: '0 8px' }}>
                      删除
                    </Button>
                  </div>
                ) : null}
              </div>
              <div>
                <Button type="primary" icon={<PlusOutlined />} size="middle">
                  新建
                </Button>
                <ReloadOutlined
                  style={{ marginLeft: '12px' }}
                  onClick={() => {
                    const user = JSON.parse(
                      localStorage.getItem('user') as string,
                    );
                    if (user.role === 'admin') {
                      dispatch({
                        type: 'article/getArticleList',
                      });
                    } else {
                      message.error('用户权限不足');
                    }
                  }}
                />
              </div>
            </div>
            <div>
              <ConfigProvider locale={zhCN}>
                <Table
                  dataSource={articleList}
                  rowSelection={{
                    type: selectionType,
                    ...rowSelection,
                  }}
                  columns={columns}
                  scroll={{ x: 1350 }}
                  pagination={{
                    showSizeChanger: true,
                    showQuickJumper: true,
                    total: articleList.length,
                    defaultPageSize: 3,
                    showTotal: (count = articleList.length) => {
                      return '共' + articleList.length + '条数据';
                    },
                    defaultCurrent: 1,
                    pageSizeOptions: ['3', '5', '8', '12'],
                  }}
                />
              </ConfigProvider>
            </div>
          </div>
        </div>
      </main>
    </main>
  );
}
 
